
import { Drawer } from 'antd';
import { inject, observer } from 'mobx-react';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import QianMarkDown from '../../components/QianMarkDown';
import LoadingDrewer from '../../store/loadingDrewer';
import'./index.less'
import Loading0 from './Loading0';
import Loading1 from './Loading1';
import LoadingTest from './LoadingTest';

@inject('loadingDrewer')
@observer
class Loading extends React.Component<RouteComponentProps&{loadingDrewer: LoadingDrewer}> {

  constructor(props: RouteComponentProps&{loadingDrewer: LoadingDrewer}) {
    super(props);
    console.log(props)
  }
  
  componentDidMount() {

  }
  render() {
    const { visible, md } = this.props.loadingDrewer
    return (
      <div className="Loading">
        <div className="loadView"><div className="loadview-bg"><Loading0 /></div></div>
        <div className="loadView"><div className="loadview-bg"><Loading1 /></div></div>
        <div className="loadView"><div className="loadview-bg"><LoadingTest /></div></div>

        <Drawer
            title="Loading0 code"
            placement="right"
            closable={false}
            width="40%"
            onClose={() => this.props.loadingDrewer.setVisible(false)}
            visible={visible}
        >
            <QianMarkDown children={md} />
        </Drawer>
      </div>
    )
  }
}


export default Loading